

<template>
    <div id="ratings" ref="ratings">
        <div class="ratings-content">
            <div class="overView">
                <div class="overView-left">
                    <h1 class="score">{{seller.score}}</h1>
                    <div class="comprehensiveScore">综合评分</div>
                    <div class="above">高于周边商家{{seller.rankRate}}%</div>
                </div>
                 <div class="overView-right">
                    <div class="score-wrapper">
                        <span class="title">服务态度</span>
                        <star :size="36" :score="seller.serviceScore"></star>
                        <span class="score">{{seller.serviceScore}}</span>
                    </div>
                    <div class="score-wrapper">
                        <span class="title">商品评分</span>
                        <star :size="36" :score="seller.foodScore"></star>
                        <span class="score">{{seller.foodScore}}</span>
                    </div>
                    <div class="delivery-wrapper">
                        <span class="title">送达时间</span>
                        <span class="delivery">{{seller.deliveryTime}}分钟</span>
                    </div>
                </div>
            </div>
            <split></split>
            <ratingSelect :ratings="ratings" :selectType="selectType" :onlyContent="onlyContent" :desc="desc" @selectTab="selectRating" @toggleCon="hasContent"></ratingSelect>
            <div class="ratings-wrapper">
                <ul v-show="ratings.length">
                    <li v-for="rating in ratings" class="rating-item" v-show="showNeed(rating.rateType,rating.text)">
                        <div class="avatar">
                            <img :src="rating.avatar" alt="" width="28" height="28">
                        </div>
                        <div class="content">
                            <h1 class="name">{{rating.username}}</h1>
                            <div class="star-wrapper">
                                <star :size="24" :score="rating.score"></star>
                                <span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
                            </div>
                            <p class="text">{{rating.text}}</p>
                            <div class="recommend" v-show="rating.recommend && rating.recommend.length">
                                <span class="icon-thumb_up"></span>
                                <span class="recommend-item" v-for="item in rating.recommend">{{item}}</span>
                            </div>
                            <div class="time">{{rating.rateTime | formatDate}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>



<script>

import BScroll from 'better-scroll';
import Star from 'components/star/star.vue';
import Split from 'components/split/split.vue';
import RatingSelect from 'components/ratingSelect/ratingSelect.vue';
import {formatDate} from 'common/js/date.js';

const ERR_OK = 0;
const ALL = 2;

export default {
    props: {
        seller: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    data(){
        return{
            ratings: [],
            selectType: ALL,
            onlyContent: false,
            desc: {
                all: '全部',
                positive: '满意',
                negative: '不满意'
            }
        }
    },
    created(){
        this.$http.get('/api/ratings').then((res) => {
            let ratingsData = res.data;
            if(ratingsData.errno === ERR_OK){
                this.ratings = ratingsData.data;
                this.$nextTick(() => {
                    this._initScroll();
                });
            }
        }, (err) => {});
    },
    methods: {
        _initScroll(){
            if(!this.scroll){
                this.scroll = new BScroll(this.$refs.ratings, {
                    click: true
                });
            }else{
                this.scroll.refresh();
            }
        },
        selectRating(type){
             this.selectType = type;
             this.$nextTick(() => {
                this.scroll.refresh();
            });
        },
        hasContent(){
            this.onlyContent = !this.onlyContent;
            this.$nextTick(() => {
                this.scroll.refresh();
            });
        },
        showNeed(type, text){
            if(this.onlyContent && !text){
                return false;
            }
            if(this.selectType === ALL){
                return true;
            }else{
                return type === this.selectType;
            }
        }
    },
    filters: {
        formatDate(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    },
    components: {
        'star': Star,
        'split': Split,
        'ratingSelect': RatingSelect
    }

}

</script>




<style scoped lang="stylus" rel="stylesheet/stylus">

    @import '~common/stylus/mixin.stylus';

    #ratings{
        position: absolute;
        top: 174px;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        .ratings-content{
            .overView{
                padding: 18px 0;
                display: flex;
                .overView-left{
                    flex: 0 0 137px;
                    width: 137px;
                    border-right: 1px solid rgba(7,17,27,0.1);
                    text-align: center;
                    padding: 6px 0;
                    @media only screen and (max-width: 320px){
                        flex: 0 0 120px;
                        width: 120px;
                    }
                    .score{
                        font-size: 24px;
                        line-height: 28px;
                        color: rgb(255,155,0);
                        margin-bottom: 6px;
                    }
                    .comprehensiveScore{
                        font-size: 12px;
                        line-height: 12px;
                        color: rgb(7,17,27);
                        margin-bottom: 8px;
                    }
                    .above{
                        font-size: 10px;
                        line-height: 10px;
                        color: rgb(147,153,159);
                    }
                }
                .overView-right{
                    flex: 1;
                    padding: 6px 0px 6px 24px;
                    @media only screen and (max-width: 320px){
                        padding-left: 6px;
                    }
                    .score-wrapper{
                        margin-bottom: 8px;
                        font-size: 0;
                        line-height: 10px;
                        .title{
                            display: inline-block;
                            font-size: 12px;
                            color: rgb(7,17,27);
                        }
                        .star{
                            display: inline-block;
                            margin: 0 12px;
                            vertical-align: middle;
                        }
                        .score{
                            font-size: 12px;
                            color: rgb(255,153,0);
                        }
                    }
                    .delivery-wrapper{
                        font-size: 0;
                        .title{
                            display: inline-block;
                            font-size: 12px;
                            color: rgb(7,17,27);
                        }
                        .delivery{
                            font-size: 12px;
                            margin-left: 12px;
                            color: rgb(147,153,159);
                        }
                    }
                }
            }
            .ratings-wrapper{
                padding: 0 18px;
                .rating-item{
                    display: flex;
                    padding: 18px 0;
                    border-bottom: 1px solid rgba(7,17,27,0.1);
                    .avatar{
                        flex: 0 0 28px;
                        width: 28px;
                        margin-right: 12px;
                        img{
                            border-radius: 50%;
                        }
                    }
                    .content{
                        position: relative;
                        flex: 1;
                        .name{
                            font-size: 10px;
                            line-height: 12px;
                            color: rgb(7,17,27);
                            margin-bottom: 4px;
                        }
                        .star-wrapper{
                            font-size: 0;
                            margin-bottom: 6px;
                            .star{
                                display: inline-block;
                            }
                            .delivery{
                                display: inline-block;
                                font-size: 10px;
                                margin-left: 6px;
                                line-height: 12px;
                                color: rgb(147,153,159);
                            }
                        }
                        .text{
                            margin-bottom: 8px;
                            font-size: 12px;
                            line-height: 18px;
                            color: rgb(7,17,27);
                        }
                        .recommend{
                            font-size: 0;
                            line-height: 16px
                            .icon-thumb_up{
                                display: inline-block;
                                font-size: 12px;
                                color: rgb(0,160,220);
                                margin: 0 8px 4px 0;
                            }
                            .recommend-item{
                                display: inline-block;
                                font-size: 9px;
                                color: rgb(147,153,159);
                                border: 1px solid rgba(7,17,27,0.1);
                                border-radius: 2px;
                                padding: 0 6px;
                                line-height: 16px;
                                margin: 0 8px 4px 0;
                                background: #fff;
                            };
                        }
                        .time{
                            position: absolute;
                            right: 0;
                            top: 0;
                            font-size: 10px;
                            line-height: 12px;
                            color: rgb(147,153,159);
                        }
                    }
                }
            }
        }
    }

</style>




